<template>
  <div class="insid_page">
    <div class="insid_page_top">
      <header class="return_box">
        <iconpark-icon class="close" icon-id="back" size="24" @click="router.go(-1)"></iconpark-icon>
        <span>
          {{ HaderText }}
        </span>
        <div v-if="showMoney" class="money_box">
          <iconpark-icon name="dong1" size="14" />
          <span> {{ roleInfo.money }}</span>
          <iconpark-icon name="add" size="14" @click="router.push('/deposit')" />
        </div>
      </header>

      <nut-searchbar class="search_input" :placeholder="t('inside_page_search_placeholder')" v-model="searchVal"
        shape="square" background="transparent" input-background="#1D1C3C">
        <template #leftin>
          <iconpark-icon name="sousuo" size="14" />
        </template>
      </nut-searchbar>
    </div>
    <div class="game_list_cantent">
      <!-- 搜索游戏 -->
      <div v-if="route.query.type === 'search'" class="custom_tab">
        <nut-tabs :auto-height="true" v-model="activeSearchCollect" @click="handleTabClick">
          <nut-tab-pane :title="t('inside_page_search_result')" :pane-key="1">
          </nut-tab-pane>
          <nut-tab-pane :title="t('inside_page_search_hot_games')" :pane-key="2">
          </nut-tab-pane>
          <nut-tab-pane :title="t('inside_page_search_recent_games')" :pane-key="3">
          </nut-tab-pane>
          <nut-tab-pane :title="t('inside_page_game_category_collect')" :pane-key="4" v-if="isLocalLoggedIn">
          </nut-tab-pane>
        </nut-tabs>
        <swiper
          ref="searchGameSwiper"
          direction="horizontal"
          :autoplay="false"
          :autoHeight="true"
          :loop="false"
          :disableOnIntercation="false"
          :touchStartPreventDefault="false"
          slidesPerView="auto"
          :space-between="5"
          :centeredSlides="true"
          class="search_page_swiper"
          @swiper="onSwiperInit"
          @slideChange="handleSwiperChange"
        >
          <swiper-slide key="1">
            <div class="electronic_list">
              <ul class="electronic_list_ul" v-if="showList1.length">
                <li class="electronic_list_li" v-for="v in showList1" :key="v.id">
                  <GameItem :item="v" :size="2"></GameItem>
                </li>
              </ul>
              <div v-if="!showList1.length && searchVal !== ''">
                <EmptyState :text="searchVal ? t('inside_page_no_null_data') : ''" :tip="searchVal ? '' : ' '" />
              </div>
              <!--  热门推荐   -->
              <div class="electronic_list hotList" v-if="!showList1.length && defaultHots.length">
                <div class="title">
                  <img v-lazy="'/imgs/home/0.webp'" alt="">
                  <span>{{ t('inside_page_game_category_hot_recommended') }}</span>
                </div>
                <ul class="electronic_list_ul">
                  <li class="electronic_list_li" v-for="v in defaultHots" :key="v.id">
                    <GameItem :item="v" :size="2" :showHot="false"></GameItem>
                  </li>
                </ul>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide key="2">
            <div class="electronic_list">
              <ul class="electronic_list_ul" v-if="showList2.length">
                <li class="electronic_list_li" v-for="v in showList2" :key="v.id">
                  <GameItem :item="v" :size="2"></GameItem>
                </li>
              </ul>
              <div v-if="!showList2.length">
                <EmptyState :text="searchVal ? t('inside_page_no_null_data') : ''" :tip="searchVal ? '' : ' '" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide key="3">
            <div class="electronic_list">
              <ul class="electronic_list_ul" v-if="showList3.length">
                <li class="electronic_list_li" v-for="v in showList3" :key="v.id">
                  <GameItem :item="v" :size="2"></GameItem>
                </li>
              </ul>
              <div v-if="!showList3.length">
                <EmptyState :text="searchVal ? t('inside_page_no_null_data') : ''" :tip="searchVal ? '' : ' '" />
              </div>

            </div>
          </swiper-slide>
          <swiper-slide key="4" v-if="isLocalLoggedIn">
            <div class="electronic_list">
              <ul class="electronic_list_ul" v-if="showList4.length">
                <li class="electronic_list_li" v-for="v in showList4" :key="v.id">
                  <GameItem :item="v" :size="2"></GameItem>
                </li>
              </ul>
              <div v-if="!showList4.length">
                <EmptyState :text="searchVal ? t('inside_page_no_null_data') : ''" :tip="searchVal ? '' : ' '" />
              </div>

            </div>
          </swiper-slide>
        </swiper>
      </div>
      <!-- 收藏 -->
      <div v-if="route.query.type === 'collect'" class="custom_tab">
        <nut-tabs v-model="activeSearchCollect" @click="handleTabClickCollect">
          <nut-tab-pane :title="t('inside_page_tab_all')" :pane-key="4"></nut-tab-pane>
          <nut-tab-pane :title="t('inside_page_search_recent_games')" :pane-key="3"></nut-tab-pane>
        </nut-tabs>
        <swiper
          ref="searchGameSwiper"
          direction="horizontal"
          :autoplay="false"
          :autoHeight="true"
          :loop="false"
          :disableOnIntercation="false"
          :touchStartPreventDefault="false"
          slidesPerView="auto"
          :space-between="5"
          :centeredSlides="true"
          class="search_page_swiper"
          @swiper="onSwiperInit"
          @slideChange="handleSwiperChangeCollect"
        >
          <swiper-slide key="4">
            <div class="electronic_list">
              <ul class="electronic_list_ul" v-if="showList4.length">
                <li class="electronic_list_li" v-for="v in showList4" :key="v.id">
                  <GameItem :item="v" :size="2"></GameItem>
                </li>
              </ul>
              <div v-if="!showList4.length">
                <EmptyState :text="searchVal ? t('inside_page_no_null_data') : ''" :tip="searchVal ? '' : ' '" />
              </div>
            </div>
          </swiper-slide>
          <swiper-slide key="3">
            <div class="electronic_list">
              <ul class="electronic_list_ul" v-if="showList3.length">
                <li class="electronic_list_li" v-for="v in showList3" :key="v.id">
                  <GameItem :item="v" :size="2"></GameItem>
                </li>
              </ul>
              <div v-if="!showList3.length">
                <EmptyState :text="searchVal ? t('inside_page_no_null_data') : ''" :tip="searchVal ? '' : ' '" />
              </div>
            </div>
          </swiper-slide>
        </swiper>  
      </div>



      <!--  热门推荐   -->
      <div v-if="(route.query.type === 'hot')" class="electronic_list hotList">
        <div class="title">
          <img v-lazy="'/imgs/home/0.webp'" alt="">
          <span>{{ t('inside_page_game_category_hot_recommended') }}</span>
        </div>
        <ul class="electronic_list_ul" v-if="showList2.length">
          <li class="electronic_list_li" v-for="v in showList2" :key="v.id">
            <GameItem :item="v" :size="2"></GameItem>
          </li>
        </ul>
        <div v-if="!showList2.length">
          <EmptyState :text="searchVal ? t('inside_page_no_null_data') : ''" :tip="searchVal ? '' : ' '" />
        </div>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import pinia from '@/store';
import { Page } from '@/store/page';
import { User } from '@/store/user';
import { storeToRefs } from 'pinia';
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { useI18n } from 'vue-i18n';
import EmptyState from './components/EmptyState.vue'
import { unserialize } from "../../utils/useStoreMethods.ts";
import { repMyGamesData } from "@/utils/useNetMethods";
import eventBus from "@/lolo/eventBus";
import { GameType } from "@/enums/gameEnum.ts";
// @ts-ignore
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const {
  homeGameData
} = storeToRefs(Page(pinia));

const { roleInfo, isLocalLoggedIn } = storeToRefs(User(pinia));

const searchVal = ref('')
const activeSearchCollect = ref<number>(1)
if (route.query.type == 'search') {
  activeSearchCollect.value = 1
}
if (route.query.type == 'collect') {
  activeSearchCollect.value = 4
}

const swiperInstance = ref(null);
const onSwiperInit = (swiper: any) => {
	swiperInstance.value = swiper; // 保存 Swiper 实例
};

const handleSwiperChange = (swiper: any) => {
  activeSearchCollect.value = swiper.realIndex + 1
}

const handleSwiperChangeCollect = (swiper: any) => {
  activeSearchCollect.value = swiper.realIndex === 0 ? 4 : 3
}

const handleTabClick = (value: any) => {
  // @ts-ignore
  swiperInstance.value?.slideTo(Number(value.paneKey) - 1, 400);
}

const handleTabClickCollect = (value: any) => {
  // @ts-ignore
  swiperInstance.value?.slideTo(Number(value.paneKey) === 4 ? 0 : 1, 400);
}

const showList1: any = computed(() => { // 展示的游戏
  let arr = []
  if (searchVal.value !== '') {
    arr = allGames.value
  }
  return arr.filter((item: any) => unserialize(item.name, false).includes(searchVal.value))
})

const showList2: any = computed(() => { // 展示的游戏
  let arr = allGames.value.filter((item: any) => item.is_hot == 1)
  return arr.filter((item: any) => unserialize(item.name, false).includes(searchVal.value))
})

const showList3: any = computed(() => { // 展示的游戏
  let arr = allGames.value.filter((itm: any) => {
    return nearList.value.includes(itm.id)
  });
  return arr.filter((item: any) => unserialize(item.name, false).includes(searchVal.value))
})

const showList4: any = computed(() => { // 展示的游戏
  let arr = allGames.value.filter((itm: any) => {
    return starList.value.includes(itm.id)
  });
  return arr.filter((item: any) => unserialize(item.name, false).includes(searchVal.value))
})

const defaultHots: any = computed(() => { // 所有热门游戏
  return allGames.value.filter((item: any) => item.is_hot == 1)
})


const allGames = computed(() => { // 全部游戏
  const games: any = []
  homeGameData.value.forEach((plat: any) => {
    plat.three_platform.flatMap((item: any) => {
      if ([GameType.Live, GameType.Sports].includes(item.venue_id)) {
        games.push(item)
      } else {
        if (item.three_game_kind) {
          item.three_game_kind.flatMap((kind: any) => {
            kind.three_game.map((game: any) => {
              if (![GameType.Live, GameType.Sports].includes(game.venue_id)) {
                games.push(game)
              }
            })
          })
        }
      }
    });
  })
  return games
})


// 最近的游戏
const nearList: any = ref([])
// 收藏的游戏
const starList: any = ref([])
const refreshMyGames = (d: any) => {
  if (d == 'clear') {
    nearList.value = []
    starList.value = []
  }
  repMyGamesData(() => { })
}
const handleMyGames = (res: any) => {
  nearList.value = res.recently
  starList.value = res.collected
  User(pinia).getCollected(res.collected);
}


onMounted(() => {
  refreshMyGames('clear')
  eventBus.on("msg_notify_req_my_games", handleMyGames);
  eventBus.on("msg_notify_modify_collect", refreshMyGames);
})
onBeforeUnmount(() => {
  eventBus.off('msg_notify_req_my_games', handleMyGames);
  eventBus.off('msg_notify_modify_collect', refreshMyGames);
})




const showMoney = computed(() => {
  const type: any = route.query.type
  return !['search', 'collect', 'hot'].includes(type)
})

const HaderText = computed(() => {
  const type: any = route.query.type
  const textMap: Record<string, string> = {
    search: 'inside_page_search',
    collect: 'inside_page_collect',
    hot: 'inside_page_hot',
    electronic: 'inside_page_electronic',
    video: 'inside_page_video',
    fishing: 'inside_page_fishing',
    sports: 'inside_page_sports',
    poker: 'inside_page_poker',
    lottery: 'inside_page_lottery'
  }
  return textMap[type] ? t(textMap[type]) : route.query.name
})




</script>
<style lang="scss" scoped>
.insid_page {
  --primary-color: #5B6CFF;
  --border-color: #501dc0;
  --bg-color: #131232;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: calc(150px + env(safe-area-inset-top));

  .insid_page_top {
    padding-bottom: 2px;
  }

  :deep(.nut-tabs__titles) {
    padding: 0;
    position: fixed;
    width: 344px;
    height: 44px;
    z-index: 3;
    top: calc(100px + env(safe-area-inset-top));
  }

  &_top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    padding-top: env(safe-area-inset-top);
    background: url('/imgs/home/public_bg.webp');
    background-size: 80%;
    padding-bottom: 50px;
  }

  :deep(.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active) {
    color: #5B6CFF !important;
  }

  :deep(.swiper-slide) {
    min-height: calc(100 * var(--vh) - 160px);
  }

  .return_box {
    padding: 14px;
    position: relative;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #FFFFFF;

    .money_box {
      position: absolute;
      right: 14px;
      top: 14px;
      height: 28px;
      padding: 6px 8px 6px 6px;
      opacity: 0;
      border-radius: 14px;
      background: #1D1C48;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        margin: 0 6px;
      }
    }
  }

  .search_input {
    padding: 10px 14px 0;

    :deep(.square) {
      height: 44px;
      border-radius: 8px;
    }

    :deep(.nut-icon) {
      height: 18px;
      width: 18px;
      font-size: 18px;
    }
  }

  .header_tabs {
    padding: 0 14px;
    display: flex;
    justify-content: space-between;

    .all_box {
      width: 60px;
      height: 40px;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
      margin-bottom: 8px;
      border-radius: 8px;
      background: #131232;
    }

    .active {
      background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
    }

    .custom_tab {
      width: 347px;
    }
  }

  .custom_tab {
    width: 100%;
    height: 100%;
    padding-top: 2px;

    :deep(.nut-tabs) {
      display: flex;
      flex-direction: column;
    }

    .custom_tab_ul {
      width: 100%;
      height: 44px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: auto;

      .search_li_box {
        width: 25%;
      }

      .shoucang_box {
        width: 50%;
      }

      .custom_tab_li {
        height: 80%;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;

        .custom_tab_item {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .custom_tab_item_active {
        color: var(--primary-color);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 3px;
          background: var(--border-color);
        }
      }

    }
  }

  .game_list_cantent {
    padding: 0 14px;

    .hot_top_tab {
      width: 100%;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;

      .custom_tab_ul {
        width: 100%;
        height: 34px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        overflow-x: auto;

        .custom_tab_li {
          margin-right: 12px;
          height: 80%;
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 500;
          line-height: 14px;
          text-align: left;

          .custom_tab_item {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }

        .custom_tab_item_active {
          color: var(--primary-color);
          position: relative;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--border-color);
          }
        }

      }

      .right_menu {
        display: flex;
        justify-content: center;
        align-items: center;

      }
    }

    .electronic_list {
      .title {
        display: flex;
        align-items: center;
      }

      .electronic_list_ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 5px;
        margin-top: 20px;

        .electronic_list_li {
          position: relative;
          height: 148px;
          position: relative;
          box-sizing: border-box;
          margin-bottom: 8px;

          .name {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            border-radius: 0 0 8px 8px !important;
            left: 0;
            bottom: 0 !important;
            width: 100%;
            height: 36px;
            background-color: rgba(26, 25, 68, 1);

            span {
              text-align: center;
              font-family: PingFang SC;
              font-size: 14px;
              font-weight: 600;

            }
          }

          .bg_img {
            position: absolute;
            width: 100%;
            // height: 100%;
            top: 0;
            left: 0;
          }

          .name {
            width: 100%;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 600;
            line-height: 12px;
            color: #FFFFFF;
            position: absolute;
            left: 0px;
            bottom: 8px;
            text-align: center;
            //white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .collect_img {
            position: absolute;
            top: 6px;
            right: 6px;
          }

        }

        .masking_layer {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(1px);
          background: rgba(0, 0, 0, 0.6);
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 18px;
          color: #ffffff;

          .maskin_img {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
          }
        }
      }
    }

    .hotList {
      .title {
        font-family: PingFang SC;
        font-size: 13px;
        line-height: 18px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 0px;

        img {
          margin-right: 4px;
          width: 17px;
          height: 14px;
        }
      }

      .electronic_list_ul {
        margin-top: 2px;
      }

      .electronic_list_li {
        width: 112px;
        height: 148px;
      }
    }

    .venue_game_box {
      height: 100%;


      :deep(.nut-tabs__titles) {
        padding: 0;
        margin: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;

        .custom-tab-item {
          background: #131232;
          margin-bottom: 8px;
          border-radius: 8px;
        }

        .active {
          background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
        }

        img {
          width: 60px;
          height: 40px;
        }
      }

      .right_electronic_list_ul {
        padding-left: 14px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 8px;
        overflow: auto;
        margin-top: 8px;

        .right_electronic_list_li {
          height: 110px;
          position: relative;
          box-sizing: border-box;
          margin-bottom: 8px;

          .bg_img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
          }

          .name {
            width: 100%;
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 600;
            line-height: 12px;
            color: #FFFFFF;
            position: absolute;
            left: 0px;
            bottom: 8px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .collect_img {
            position: absolute;
            top: 6px;
            right: 6px;
          }

        }

        .masking_layer {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          backdrop-filter: blur(1px);
          background: rgba(0, 0, 0, 0.6);
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          line-height: 18px;
          color: #ffffff;

          .maskin_img {
            width: 32px;
            height: 32px;
            margin-bottom: 8px;
          }
        }
      }
    }
  }
}

:deep(.nut-tabs) {
  .nut-tabs__titles {
    background: transparent;
    border: none;
    margin-top: 4px;
    width: 346px;

    .nut-tabs__titles-item {
      color: #fff;
      font-size: 14px;
      padding: 0 12px;

      &.active {
        color: var(--primary-color);
        font-weight: 600;

        &::after {
          background: var(--border-color);
        }
      }
    }
  }
}

:deep(.empty-state) {
  height: 140px;
  padding-top: 0;
  padding-bottom: 14px;
}
</style>
